<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    
    <title>我的购物车</title>
    
	<link href="../css/main.css" rel="stylesheet" type="text/css" media="all">
	<style>
#customers
{	text-align:center;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:95%;
	border-collapse:collapse;
}
#customers td, #customers th 
{	text-align:center;
	font-size:1.6em;
	border:1px solid #98bf21;
	padding:3px 7px 2px 7px;
}
#customers th 
{   
	font-size:1.8em;
	text-align:center;
	padding-top:5px;
	padding-bottom:4px;
	background-color:#A7C942;
	color:#ffffff;
}
#customers tr.alt td 
{
	color:#000000;
	background-color:#EAF2D3;
}
</style>
 <script type="text/javascript">
 function delitem(id){
 var b=window.confirm("您确定要删除吗？");
 if(b){
 window.location.href="${pageContext.request.contextPath }/servlet/DelItemServlet?id="+id;
 }
 }
 function buyitem(id,num){
 var b=window.confirm("您确定要购买吗？");
 if(b){
 window.location.href="${pageContext.request.contextPath }/servlet/BuyItemServlet?id="+id+"&num="+num;
 }
 }
 
 function claerbuycar(){
 var b=window.confirm("您确定清空购物车吗？");
 if(b){
 window.location.href="${pageContext.request.contextPath }/servlet/ClearServlet";
 }
 }
 
 
 function realclaerbuycar(){
 var b=window.confirm("您确定全部购买吗吗？");
 if(b){
 window.location.href="${pageContext.request.contextPath }/servlet/RealClearServlet";
 }
 }
 function changeitemnum(input,id,oldvalue){
 var num=input.value;
 if(num<0||num!=parseInt(num)){
 alert("商品的数量只能是正整数！");
 input.value=oldvalue;
 return;
 }
 
 var b=window.confirm("您确定要将商品的数量修改为 "+num+" 吗？");
 if(b){
 window.location.href="${pageContext.request.contextPath }/servlet/ChangeNumServlet?id="+id+"&num="+num;
 }
 
 }
 </script>
  </head>
  
  <body>
      <%@include file="header.jsp" %>
		
		<!-- 抬头 -->
		<c:if test="${empty(buycar.itemmap) }">
		<span style="left:45%;top:50%;position:absolute; font-size: 1.8em;">您的购物车中没有商品</span>  
		</c:if>
		<c:if test="${!empty(buycar.itemmap) }">
    <table id="customers">
    <tr >
    	<th>书名</th>
    	<th>图片</th>
     	<th>作者</th>
     	<td>单价</td>
      	<th>数量</th>
      	<th>小计</th>
    	<th>编辑</th>
    </tr>
    <c:forEach var="entry" items="${buycar.itemmap }">
     <tr class="alt">
    	<td>${entry.value.book.bName }</td>
    	<td><img alt="" src="${pageContext.request.contextPath }/img/${entry.value.book.bSrc }"></td>
     	<td>${entry.value.book.bAuthor }</td>
     	<td>${entry.value.book.bFixprice }</td>
      	<td>
      	<input type="text" value="${entry.value.num }" style="width:32px;" onchange="changeitemnum(this,${entry.key},${entry.value.num })">
      	</td>
      	<td>${entry.value.price }</td>
    	<td>
		<a href="javascript:void(0)" onclick="delitem(${entry.key})">删除</a><!-- javascript:void(0) 去掉a连接的默认格式 -->
		<!--  -->
		</td>
		<td>
		<a href="javascript:void(0)" onclick="buyitem(${entry.key},${entry.value.num })">购买</a><!-- javascript:void(0) 去掉a连接的默认格式 -->
		<!--  -->
		</td>
    </tr>
    
    </c:forEach>
    <tr class="alt">
    	<td colspan="3">总价</td>
     	
    	<td colspan="2">
		${buycar.price }
		</td>
		<td><a onclick="claerbuycar()">清空购物车</a></td>
		<td><a onclick="realclaerbuycar()">全部购买</a></td>
	</tr>
    </table>
    </c:if>
  </body>
</html>
